<template>
  <div class="search-container" :style="{ background: searchBg }" :class="bg && 'bg'">
    <van-search
      v-model="value"
      shape="round"
      show-action
      background="transparent"
      class="search"
      placeholder="请输入商品名称"
      @focus="searchFocus"
      @search="search"
      @cancel="cancel"
    >
      <template slot="action" v-if="!bg">
        <span class="iconfont iconkefu" @click="kefuCLick"></span>
      </template>
    </van-search>
    <div class="blank-container" @click="cancel" v-if="bg">
      <p class="tip">点击空白处返回</p>
    </div>
    <customerService ref="customerService"/>
  </div>
</template>

<script>
import customerService from '@components/customerService'

export default {
  components: {
    customerService
  },
  props: {
    background: {
      type: String,
      default: "transparent"
    }
  },
  data() {
    return {
      value: "",
      bg: false
    };
  },
  computed: {
    searchBg() {
      if (!this.bg) {
        return this.background;
      } else {
        if (this.background === 'transparent') {
          return '#fff'
        } else {
          return this.background
        }
      }
    }
  },
  methods: {
    search (val) {
      this.$router.push({
        path: '/list',
        query: {
          type: 'search',
          val: val
        }
      })
    },
    cancel () {
      this.bg = false
      this.value = ''
    },
    /*
     *@name: 客服点击
     *@param:{type}
     *@description:
     *@return:
     *@author: lupan
     *@date: 2020-04-27 21:04:37
     */
    kefuCLick() {
      this.$refs['customerService'].open()
    },
    searchFocus() {
      this.bg = true;
    }
  }
};
</script>

<style lang="scss">
.search-container {
  position: absolute;
  z-index: 99999;
  top: 0;
  width: 100vw;

  display: flex;
  flex-direction: column;
  &.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
  }
  .search {
    padding: 20px 30px;
  }
  .van-icon-search {
    font-size: 40px;
  }
  .van-cell {
    line-height: 50px;
  }
  .iconkefu {
    font-size: 40px;
    line-height: 60px;
    color: #fff;
  }
  .blank-container {
    flex: 1;
    position: relative;
    background: #fff;
    .tip {
      position: absolute;
      bottom: 50px;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 30px;
    }
  }
}
</style>